<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>个人社保计算器</title>
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<!-- 计算方法 -->
		<script>
			function calc(){
				// confirm("您确认删除吗？")
				// alert("大数据");
				// 1.获取文本框的数据$函数名称：定位到salary.val取值
				sal = $("#salary").val();
				salnum = parseInt(sal);//类型转换字符串-->int
				// 2.开始计算
				// 养老
				gryl = salnum * 0.08;
				gsyl = salnum *0.02;
				// 医保
				gryb = salnum * 0.06;
				gsyb = salnum *0.02;
				// 失业
				grsy = salnum * 0.05;
				gssy = salnum *0.15;
				// 工伤
				gsgs = salnum * 0.05;
				// 生育
				sygs = salnum *0.08;
				// 公积金
				gsgjj = salnum *0.12;
				grgjj = salnum *0.12;
				// 合计
				gshj = gryl+gryb+grsy+grgjj 
				grhj = gsyl+gsyb+gssy+gsgs+sygs+gsgjj
				sum= gshj+grhj
				// 3.把计算结果传回给文本框
				$("#gryl").text(gryl);
				$("#gsyl").text(gsyl);
				$("#gryb").text(gryb);
				$("#gsyb").text(gsyb);
				$("#grsy").text(grsy);
				$("#gssy").text(gssy);
				$("#gsgs").text(gsgs);
				$("#sygs").text(sygs);
				$("#grgjj").text(grgjj);
				$("#gsgjj").text(gsgjj);
				$("#grhj").text(grhj);
				$("#gshj").text(gshj);
				$("#sum").text(sum);
			}
		</script>
	</head>
	<body>
		<div class="container text-center">
			<h1 class="text-center">个人社保计算</h1>
			<table class="table table-bordered">
				<tr>
					<td class="text-center">工资</td>
					<td colspan="3">
						<input type="text" id="salary"  class="form-control" placeholder="请输入工资" >
					</td>
					<td ><button onclick="calc()" class="btn btn-danger btn-block">计算</button></td>
				</tr>
				<!-- 第二行 -->
				<tr class="text-center bg-primary">
					<td>险种</td>
					<td>个人%</td>
					<td>个人</td>
					<td>公司%</td>
					<td>公司</td>
				</tr>
				<!-- 第三行 -->
				<tr class="text-center">
					<td>养老</td>
					<td>8%</td>
					<td id="gryl"></td>
					<td>2%</td>
					<td id="gsyl"></td>
				</tr>
				<!-- 第三行 -->
				<tr class="text-center ">
					<td>医疗</td>
					<td>6%</td>
					<td id="gryb"></td>
					<td>2%</td>
					<td id="gsyb"></td>
				</tr>
				<!-- 第四行 -->
				<tr class="text-center ">
					<td>失业</td>
					<td >0.5%</td>
					<td id="grsy"></td>
					<td>1.5%</td>
					<td id="gssy"></td>
				</tr>
				<!-- 第五行 -->
				<tr class="text-center ">
					<td>工伤</td>
					<td></td>
					<td></td>
					<td>0.5%</td>
					<td id="gsgs"></td>
				</tr>
				<!-- 第六行 -->
				<tr class="text-center ">
					<td>生育</td>
					<td></td>
					<td></td>
					<td>8%</td>
					<td id="sygs"></td>
				</tr>
				<!-- 第七行 -->
				<tr class="text-center ">
					<td>公积金</td>
					<td>12%</td>
					<td id="grgjj"></td>
					<td>12%</td>
					<td id="gsgjj"></td>
				</tr>
				<!-- 第八行 -->
				<tr class="text-center ">
					<td>合计</td>
					<td>个人合计</td>
					<td id="grhj"></td>
					<td>公司合计</td>
					<td id="gshj"></td>
				</tr>
				<!-- 第九行 -->
				<tr class="text-center">
					<td>总额</td>
					<td colspan="4" id="sum"></td>
				</tr>
			</table>
			开发者： 19级 数据科学与大数据技术 景雅贤
		</div>
	</body>
</html>
